<!DOCTYPE html>
<html lang="zh"
      xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"
>
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
    <script type="text/javascript" th:src="@{/js/modules/echarts.js}"></script>
    <style type="text/css">
        .layui-anim{
            width: 200px;
            height: 200px;
            line-height: 200px;
            margin: 0 auto 10px;
            text-align: center;
            background-color: #009688;
            cursor: pointer; color: #fff;
            border-radius: 50%;}
    </style>
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote quoteBox layui-quote-top">
    <form class="layui-form">
        <div class="queryTable">
            <text style="margin-right: 40px;">设备名称：<th th:text="${name}"></th></text>
            <text style="margin-right: 40px;">设备编号：<th th:text="${no}"></th></text>
            <text style="margin-right: 40px;">设备类型：<th th:text="${typeName}"></th></text>
            <text>设备位置：<th th:text="${location}"></th></text>
        </div>
    </form>
</blockquote>
<div class="layui-row layui-col-space5 panel_box">
    <div class="layui-col-md6">
        <fieldset class="layui-elem-field layui-field-title">
            <legend><th th:text="${dataName}"></th>  实时数据</legend>
        </fieldset>
<!--        <div class="layui-anim layui-anim-scale" data-anim="layui-anim-scale">-->
<!--            <h1 id="realData">18 mg/m³</h1>-->
<!--        </div>-->


        <div id="main1" style="height:400px;"></div>
    </div>
    <div class="layui-col-md6">
        <div id="main" style="height:400px;"></div>
    </div>
</div>

</body>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" >
    layui.config({
        base: "/js/modules/"
    }).extend({
        "listView": "listView"
    });
    layui.use(['form', 'listView', 'jquery', 'common', 'table'], function () {
        let form = layui.form,
            common = layui.common,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;
    });


    // setInterval(function () {
    //     layui.jquery('#realData').html(randomNum(15,30)+' mg/m³');
    // },5000);
    function randomNum(minNum,maxNum){
        switch(arguments.length){
            case 1:
                return parseInt(Math.random()*minNum+1,10);
                break;
            case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
            default:
                return 0;
                break;
        }
    }

//===============================================================
    var myChart1 = echarts.init(document.getElementById('main1'));

    option1 = {
        tooltip: {
            formatter: '{a} <br/>{b} : {c}'
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '[[${dataName}]]',
                type: 'gauge',
                detail: {formatter: '{value}'},
                data: [{value: 16, name: '[[${dataName}]]   mg/m³'}]
            }
        ]
    };

    setInterval(function () {
        option1.series[0].data[0].value = randomNum(15,30);
        myChart1.setOption(option1, true);
    },2000);

    //==============================================================

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    option = {
        title: {
            text: '[[${dataName}]]  30天内日平均值'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['[[${dataName}]]']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['7/3','7/4','7/5','7/6','7/7','7/8','7/9','7/10','7/11','7/12','7/13','7/14','7/15','7/16','7/17','7/18','7/19','7/20','7/21','7/22','7/23','7/24','7/25','7/26','7/27','7/28','7/29','7/30', '7/31', '8/1', '8/2']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'PM2.5',
                type: 'line',
                stack: '总量',
                data: [21, 18, 19, 14, 19, 15, 21,14,18,17,22]
            }
        ]
    };

    myChart.setOption(option);

</script>
</html>
